!! slot 於 2.6.0 已棄用 !!

(編輯日期 2019.11.11)
官方說明

這個標題會不會被取消資格啊...

slot

官網 插槽
這個也是跟component有關係的一員，我們之前是在component給固定的html標籤，那麼我們在<componentName></componentName>標籤之間自己加入其他標籤(例如<div>)，它會直接被組件蓋過去而不會顯示。

<componentName>
  <div>你看不到我</div>
</componentName>

有時候我們想要自己加入一些標籤，像這樣客製化的作法，就要靠slot來幫忙，且<slot>不會被編譯出來，它的功用是提供給標籤資料(字串)

<componentName>
  <div>你真是慧眼識英雄</div>
</componentName>

<script type='text/x-template' id='slotComponent'>
  <h1>示範標題</h1>
  <slot>
    //這裡不需輸入文字，上面的<div>會出現在這裡
  </slot>
</script>

預設值

插槽的默认内容
上一個的範例是在<componentName></componentName>加入標籤，那我們如果在<slot>裡面加入html標籤跟內容，且<componentName></componentName>之間沒有標籤和內容，此時<slot>裡的內容(包含html標籤)就會被視為預設值顯示

<componentName>
</componentName>

<script type='text/x-template' id='slotComponent'>
  <h1>示範標題</h1>
  <slot>
    <div>你真是慧眼識英雄</div>
  </slot>
</script>

具名

具名插槽
slot跟函式有點類似，可以分為匿名及具名。
給slot一個name attribute

  <slot name='header'>換我上場</slot>

到html處

  <componentName>
    <div slot='header'>我要被換角了，換柱風波歷史重演QQ</div>
  </componentName>

具名插槽會套用x-template的HTML，代換slot相對應的name，
若代換對應到的HTML是<template>就不會被編譯，只有文字節點被替換；
若對應的是其他內建tag name例如<h1>，則會保留<h1>後替換文字節點，
與HTML裡的順序無關，只需對應x-template模板的順序及slot name，例如

<named-slot-component>
  <header slot="headerSlot">這是要來換頭的句子</header>
  <template slot="footer-slot">新的腳</template>
  <template slot="btn-slot">按我</template>
  <p>其餘的內容</p>
</named-slot-component>

這裡的按鈕在<p>的上方

<script type="text/x-template" id="namedSlotComponent">
  <div class="card my-3">
  <div class="card-header">
    <slot name="headerSlot">預設文字要來被換頭的句子</slot>
  </div>
  <div class="card-body">
    <slot>
      <h5 class="card-title">Test title</h5>
      <p class="card-text">Lorem paragraph here here here.</p>
    </slot>
    <a href="#" class="btn btn-primary">
      <slot name="btn-slot">you can't see me anymore</slot>
    </a>
  </div>
  <div class="card-footer">
    <slot name="footer-slot">舊的腳</slot>
  </div>
</div>
</script>

因按鈕在x-template裡位於<p>下方，所以實際畫面及程式碼會是在<p>下方

小結

起先我在猜想slot可能是用來做部落格或新聞標頭+內文用的，不過用for感覺比較適合，官網範例是將我們引導使用在<header> <main> <footer>，總之因為有匿名具名之分，一定適用在重複性高的組件或標籤上